<template>
  <div class="common-group-menu-component">
    <a-card :bordered="false" :title="$t('setting.group')">
      <template #extra>
        <a-button type="text" @click="$emit('add')">
          <PlusOutlined />
        </a-button>
      </template>
      <a-menu
        v-model:selectedKeys="selectedKeys"
        :style="{ height: '100%' }"
        mode="inline"
        @select="handleSelect"
      >
        <a-menu-item v-for="group in groupList" :key="group.id">
          <template #icon>
            <component :is="getIconComponent(group.icon)" />
          </template>
          <span>
            <a-dropdown :trigger="['contextmenu']">
              <span>{{ group.name }}</span>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="edit" @click="handleEdit(group)">
                    <EditOutlined /> {{ $t('common.edit') }}
                  </a-menu-item>
                  <a-menu-item key="delete" @click="handleDelete(group)">
                    <DeleteOutlined /> {{ $t('common.delete') }}
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </span>
        </a-menu-item>
      </a-menu>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { 
  PlusOutlined, 
  EditOutlined, 
  DeleteOutlined,
  SettingOutlined,
  MailOutlined,
  FileOutlined,
  SecurityScanOutlined,
  DesktopOutlined
} from '@ant-design/icons-vue'
import type { ConfigGroup } from '@/types/api/config/configGroup'
import { usePermission } from '@/hooks/usePermission'

defineOptions({
  name: 'GroupMenu'
})

// Props定义
const props = withDefaults(defineProps<{
  groupList: ConfigGroup[]
  currentGroupId: string
}>(), {
  groupList: () => [],
  currentGroupId: ''
})

// Emits定义
const emit = defineEmits<{
  (e: 'select', groupId: string): void
  (e: 'add'): void
  (e: 'edit', group: ConfigGroup): void
  (e: 'delete', group: ConfigGroup): void
}>()

// 国际化
const { t } = useI18n()

// 权限检查
const { hasPermission } = usePermission()

// 选中的分组
const selectedKeys = computed({
  get: () => props.currentGroupId ? [props.currentGroupId] : [],
  set: (val) => {
    if (val.length > 0) {
      emit('select', val[0])
    }
  }
})

// 获取图标组件
const getIconComponent = (icon: string) => {
  const iconMap: Record<string, any> = {
    setting: SettingOutlined,
    mail: MailOutlined,
    file: FileOutlined,
    security: SecurityScanOutlined,
    system: DesktopOutlined
  }
  return iconMap[icon] || SettingOutlined
}

// 选择分组
const handleSelect = (info: { key: string | number }) => {
  emit('select', String(info.key))
}

// 编辑分组
const handleEdit = (group: ConfigGroup) => {
  emit('edit', group)
}

// 删除分组
const handleDelete = (group: ConfigGroup) => {
  emit('delete', group)
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/views/common.scss';
</style> 